<!-- TODO remove copypasting -->
<mat-menu
  #customizerMenu="matMenu"
  class="customizer-menu"
>
  <!-- Sort By -->
  <button
    mat-menu-item
    [matMenuTriggerFor]="sortMenu"
  >
    <mat-icon>sort</mat-icon>
    <span>{{ T.F.TASK_VIEW.CUSTOMIZER.SORT_TEMPORARY | translate }}</span>
    @if (customizerService.selectedSort().type) {
      <span class="current-value">
        {{ customizerService.selectedSort().label | translate }}
      </span>
    }
  </button>

  <!-- Sort Permanently -->
  <button
    mat-menu-item
    [matMenuTriggerFor]="sortPermanentMenu"
  >
    <mat-icon>sort</mat-icon>
    <span>{{ T.F.TASK_VIEW.CUSTOMIZER.SORT_PERMANENT | translate }}</span>
  </button>

  <!-- Group By -->
  <button
    mat-menu-item
    [matMenuTriggerFor]="groupMenu"
  >
    <mat-icon>group_work</mat-icon>
    <span>{{ T.F.TASK_VIEW.CUSTOMIZER.GROUP_BY | translate }}</span>
    @if (customizerService.selectedGroup().type) {
      <span class="current-value">
        {{ customizerService.selectedGroup().label | translate }}
      </span>
    }
  </button>

  <!-- Filter By -->
  <button
    mat-menu-item
    [matMenuTriggerFor]="filterMenu"
  >
    <mat-icon>filter_alt</mat-icon>
    <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_BY | translate }}</span>
    @if (customizerService.selectedFilter().type) {
      <span class="current-value">
        {{ customizerService.selectedFilter().label | translate }}
      </span>
    }
  </button>

  <mat-divider></mat-divider>

  <!-- Reset All -->
  <button
    mat-menu-item
    (click)="onResetAll()"
  >
    <mat-icon>refresh</mat-icon>
    <span>{{ T.F.TASK_VIEW.CUSTOMIZER.RESET_ALL | translate }}</span>
  </button>
</mat-menu>

<!-- Sort submenu -->
<mat-menu #sortMenu="matMenu">
  @for (opt of OPTIONS.sort.list; track opt.type) {
    <button
      mat-menu-item
      (click)="customizerService.setSort(opt)"
      [class.active]="customizerService.selectedSort().type === opt.type"
    >
      <span class="menu-item-content">
        <span>{{ opt.label | translate }}</span>
        @if (customizerService.selectedSort().type === opt.type) {
          @if (opt.type) {
            <mat-icon class="check-icon">
              {{
                opt.order === OPTIONS.sort.order.ASC ? 'arrow_downward' : 'arrow_upward'
              }}
            </mat-icon>
          } @else {
            <mat-icon class="check-icon">check</mat-icon>
          }
        }
      </span>
    </button>
  }
</mat-menu>

<!-- Sort Permanent submenu -->
<mat-menu #sortPermanentMenu="matMenu">
  @for (opt of OPTIONS.sort.list; track opt.type) {
    @if (opt.type) {
      <button
        mat-menu-item
        (click)="customizerService.sortPermanent(opt)"
      >
        <span class="menu-item-content">
          <span>{{ opt.label | translate }}</span>
        </span>
      </button>
    }
  }
</mat-menu>

<!-- Group submenu -->
<mat-menu #groupMenu="matMenu">
  @for (opt of OPTIONS.group.list; track opt.type) {
    <button
      mat-menu-item
      (click)="customizerService.setGroup(opt)"
      [class.active]="customizerService.selectedGroup().type === opt.type"
    >
      <span class="menu-item-content">
        <span>{{ opt.label | translate }}</span>
        @if (customizerService.selectedGroup().type === opt.type) {
          <mat-icon class="check-icon">check</mat-icon>
        }
      </span>
    </button>
  }
</mat-menu>

<!-- Filter submenu -->
<mat-menu #filterMenu="matMenu">
  <button
    mat-menu-item
    (click)="onFilterSelect(DEFAULT.filter)"
    [class.active]="!customizerService.selectedFilter().type"
  >
    <span class="menu-item-content">
      <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_DEFAULT | translate }}</span>
      @if (!customizerService.selectedFilter().type) {
        <mat-icon class="check-icon">check</mat-icon>
      }
    </span>
  </button>

  <button
    mat-menu-item
    [matMenuTriggerFor]="filterTagMenu"
    [class.active]="customizerService.selectedFilter().type === OPTIONS.filter.types.tag"
  >
    <span class="menu-item-content">
      <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_TAG | translate }}</span>
      @if (customizerService.selectedFilter().type === OPTIONS.filter.types.tag) {
        <mat-icon class="check-icon">check</mat-icon>
      }
    </span>
  </button>

  <button
    mat-menu-item
    [matMenuTriggerFor]="filterProjectMenu"
    [class.active]="
      customizerService.selectedFilter().type === OPTIONS.filter.types.project
    "
  >
    <span class="menu-item-content">
      <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_PROJECT | translate }}</span>
      @if (customizerService.selectedFilter().type === OPTIONS.filter.types.project) {
        <mat-icon class="check-icon">check</mat-icon>
      }
    </span>
  </button>

  <button
    mat-menu-item
    [matMenuTriggerFor]="filterScheduledDateMenu"
    [class.active]="
      customizerService.selectedFilter().type === OPTIONS.filter.types.scheduledDate
    "
  >
    <span class="menu-item-content">
      <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_SCHEDULED_DATE | translate }}</span>
      @if (
        customizerService.selectedFilter().type === OPTIONS.filter.types.scheduledDate
      ) {
        <mat-icon class="check-icon">check</mat-icon>
      }
    </span>
  </button>

  <button
    mat-menu-item
    [matMenuTriggerFor]="filterEstimatedTimeMenu"
    [class.active]="
      customizerService.selectedFilter().type === OPTIONS.filter.types.estimatedTime
    "
  >
    <span class="menu-item-content">
      <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_ESTIMATED_TIME | translate }}</span>
      @if (
        customizerService.selectedFilter().type === OPTIONS.filter.types.estimatedTime
      ) {
        <mat-icon class="check-icon">check</mat-icon>
      }
    </span>
  </button>

  <button
    mat-menu-item
    [matMenuTriggerFor]="filterTimeSpentMenu"
    [class.active]="
      customizerService.selectedFilter().type === OPTIONS.filter.types.timeSpent
    "
  >
    <span class="menu-item-content">
      <span>{{ T.F.TASK_VIEW.CUSTOMIZER.FILTER_TIME_SPENT | translate }}</span>
      @if (customizerService.selectedFilter().type === OPTIONS.filter.types.timeSpent) {
        <mat-icon class="check-icon">check</mat-icon>
      }
    </span>
  </button>
</mat-menu>

<!-- Filter: Tag submenu -->
<mat-menu #filterTagMenu="matMenu">
  <div
    class="menu-input-wrapper"
    (click)="$event.stopPropagation()"
  >
    <mat-form-field
      class="menu-input"
      subscriptSizing="dynamic"
    >
      <input
        matInput
        [ngModel]="
          customizerService.selectedFilter().preset === OPTIONS.filter.types.tag
            ? customizerService.selectedFilter().preset
            : ''
        "
        (ngModelChange)="onFilterInputChange(OPTIONS.filter.types.tag, $event)"
        [placeholder]="T.F.TASK_VIEW.CUSTOMIZER.ENTER_TAG | translate"
        (keydown.enter)="$event.stopPropagation()"
      />
    </mat-form-field>
  </div>
</mat-menu>

<!-- Filter: Project submenu -->
<mat-menu #filterProjectMenu="matMenu">
  <div
    class="menu-input-wrapper"
    (click)="$event.stopPropagation()"
  >
    <mat-form-field
      class="menu-input"
      subscriptSizing="dynamic"
    >
      <input
        matInput
        [ngModel]="
          customizerService.selectedFilter().preset === OPTIONS.filter.types.project
            ? customizerService.selectedFilter().preset
            : ''
        "
        (ngModelChange)="onFilterInputChange(OPTIONS.filter.types.project, $event)"
        [placeholder]="T.F.TASK_VIEW.CUSTOMIZER.ENTER_PROJECT | translate"
        (keydown.enter)="$event.stopPropagation()"
      />
    </mat-form-field>
  </div>
</mat-menu>

<!-- Filter: Scheduled Date submenu -->
<mat-menu #filterScheduledDateMenu>
  <task-view-customizer-menu-item
    [type]="OPTIONS.filter.types.scheduledDate"
    [options]="PRESETS.schedule"
    [selectedFilter]="customizerService.selectedFilter()"
    (byClick)="onFilterWithValue($event)"
  />
</mat-menu>

<!-- Filter: Estimated Time submenu -->
<mat-menu #filterEstimatedTimeMenu>
  <task-view-customizer-menu-item
    [type]="OPTIONS.filter.types.estimatedTime"
    [options]="PRESETS.time"
    [selectedFilter]="customizerService.selectedFilter()"
    (byClick)="onFilterWithValue($event)"
  />
</mat-menu>

<!-- Filter: Time Spent submenu -->
<mat-menu #filterTimeSpentMenu>
  <task-view-customizer-menu-item
    [type]="OPTIONS.filter.types.timeSpent"
    [options]="PRESETS.time"
    [selectedFilter]="customizerService.selectedFilter()"
    (byClick)="onFilterWithValue($event)"
  />
</mat-menu>
